<template>
  <div class="bgc">
    <div class="main">
      <div class="tree-tab">
        <div class="tree-list">
          <div
            class="tree-list-arr"
            v-for="(item, index) in list"
            :key="item.orgNo"
          >
            <div
              class="tree-arr tree-list-parent"
              :class="{ heighlight: isActive[index] }"
              @click="childrenAc(index)"
              style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ item.orgName }}
            </div>
            <div class="children" v-if="childActive === index">
              <div
                @dragstart="dragStart"
                class="tree-arr tree-list-children"
                style="display: flex; align-items: center"
                v-for="i in item.cameraList"
                :key="i.id"
                @click="setVideo(i)"
                draggable="true"
              >
                <img
                  src="@/assets/webcam.png"
                  :style="{
                    'vertical-align': 'middle',
                    width: '20px',
                    height: '22px',
                    'margin-top': '-7px',
                    'margin-right': '5px'
                  }"
                /><span
                  style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    flex: 1;
                  "
                  >{{ i.name }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="tree-down">
          <div class="box-img" @click="imgActive(1)">
            <img v-if="active === 1" src="../../assets/box-1-ac.png" />
            <img v-else src="../../assets/box-1.png" />
          </div>
          <div class="box-img" @click="imgActive(4)">
            <img v-if="active === 4" src="../../assets/box-4-ac.png" />
            <img v-else src="../../assets/box-4.png" />
          </div>
          <div class="box-img" @click="imgActive(6)">
            <img v-if="active === 6" src="../../assets/box-6-ac.png" />
            <img v-else src="../../assets/box-6.png" />
          </div>
          <div class="box-img" @click="imgActive(9)">
            <img v-if="active === 9" src="../../assets/box-9-ac.png" />
            <img v-else src="../../assets/box-9.png" />
          </div>
        </div>
      </div>
      <div style="width: 10px; height: 100%; background-color: #f1f1f1"></div>
      <div class="contain" ref="contain6">
        <div :class="'wrap' + active">
          <div
            class="view pointer-cursor"
            v-for="(video, index) in videoList"
            :key="index"
            :style="{ border: checkedBox === index ? '2px solid #337ecc' : '' }"
            :data-id="index"
            @click="Choice(index)"
            @dragover.prevent
            @drop="drop"
          >
            <MyVideo
              v-if="video.deviceSerial"
              :video="video"
              @del="del"
              @huifang="huifang"
              @quanping="quanping"
            />
          </div>
        </div>
        <div class="fullscreen" v-if="qp">
          <div class="view" data-id="canvasFull">
            <MyVideo
              :video="qpvideo"
              :isqp="false"
              @del="del"
              @huifang="huifang"
              @quanping="quanping"
              @qxqp="qxqp"
            />
          </div>
        </div>
        <el-dialog
          :title="dialogName"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :destroy-on-close="true"
        >
          <div :style="{ width: '100%', height: '100%' }">
            <iframe
              width="640"
              height="480"
              frameborder="0"
              class="rec-frame"
              :src="iframeSrc"
            />
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import MyVideo from './components/MyVideo.vue'
import {
  getCameraListApi,
  getVideoListApi,
  saveCameraApi,
  getCameraApi,
  getHkUrlApi,
  getNewAccessTokenApi
} from '@/api/surveillance'
// import EzuikitFlv from 'ezuikit-flv'

const player = null
export default {
  name: 'videoSurveillance',
  components: { MyVideo },
  data() {
    return {
      drag: false,
      dia: 'YS',
      active: 6,
      childActive: 0,
      qpvideo: {},
      qp: false,
      isActive: { 0: true },
      controlNum: '',
      iframeSrc: '',
      dialogName: '',
      list: [],
      list2: [],
      check: [],
      dialogVisible: false,
      tokenList: [],
      videoList: [{}, {}, {}, {}, {}, {}],
      videoList1: [{}],
      videoList4: [{}, {}, {}, {}],
      videoList6: [{}, {}, {}, {}, {}, {}],
      videoList9: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      checkedBox: null
    }
  },
  watch: {
    videoList: {
      handler: function (newValue, oldValue) {
        this[`videoList${this.active}`] = this.videoList
        console.log(JSON.stringify(this.videoList))
        saveCameraApi({
          content: JSON.stringify(this.videoList),
          split: `${this.active}`
        })
      },
      deep: true // 深度监听
    }
  },
  created() {
    this.getCameraList()
    this.initVideoList(6)
    // https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${deviceSerial}/1.local.rec&accessToken=${accessToken}
  },
  mounted() {
    console.log(this.videoList)
  },
  beforeDestroy() {
    player.stop()
  },
  methods: {
    async initVideoList(split) {
      const _videoListResp = await getCameraApi(split)
      let videoList = JSON.parse(_videoListResp?.data.entity.configJson || '[]')
      if (videoList.length === 0) {
        videoList = this[`videoList${split}`]
      }
      console.log(videoList)
      this.videoList = videoList
      console.log(this.videoList)
    },
    imgActive(n) {
      this.active = n
      this.videoList = this[`videoList${n}`]
      this.initVideoList(n)
      this.qp = false
    },
    childrenAc(item) {
      console.log(item)
      this.childActive = item
      this.isActive = { [item]: true }
      this.childActive = item
    },
    // 拖
    dragStart(event) {
      // 设置被拖拽元素的数据
      // console.log(event.target.innerText)
      // console.log(this.list)
      let id = ''
      this.list.forEach((item) => {
        item.cameraList.forEach((i) => {
          if (i.name === event.target.innerText) {
            id = i.id
          }
        })
      })
      // 当前拖拽的父级数据
      const item = this.list.find((item) =>
        item.cameraList.find((i) => i.name === event.target.innerText)
      )
      // 当前拖拽的数据
      const itemChildren = item.cameraList.find(
        (i) => i.name === event.target.innerText
      )
      // console.log(id)
      // console.log(item)
      console.log(itemChildren)
      this.getVideoList(itemChildren.buro)
      // console.log(this.tokenList)
      // console.log(token)
      // console.log(id)
      event.dataTransfer.setData('type', itemChildren.type)
      event.dataTransfer.setData('text', id)
      event.dataTransfer.setData('data', JSON.stringify(itemChildren))
      event.dataTransfer.setData('par', JSON.stringify(item))
      event.dataTransfer.setData('name', item.orgName + '/' + itemChildren.name)
      // console.log('开始拖拽')
      console.log(event)
    },
    // 放
    async drop(event) {
      event.preventDefault()
      const data = JSON.parse(event.dataTransfer.getData('data'))
      console.log('data', data)

      const name = event.dataTransfer.getData('name')
      const type = event.dataTransfer.getData('type')
      const index = Number.parseInt(event.target.attributes['data-id'].value)
      console.log(index)
      this.videoList[index] = {
        deviceSerial: data.nvr,
        orgNo: data.buro,
        index: index,
        channel: data.channel,
        name: name,
        type: type
      }
      this.videoList = [...this.videoList]
    },
    Choice(index) {
      // 执行你的点击操作
      if (this.checkedBox === index) {
        this.checkedBox = null
      } else {
        this.checkedBox = index
      }
    },
    setVideo(data) {
      console.log(data)
      console.log(this.list)
      const item = this.list.find((item) =>
        item.cameraList.find((i) => i.name === data.name)
      )
      console.log(item)
      if (this.checkedBox || this.checkedBox == 0) {
        this.videoList[this.checkedBox] = {
          deviceSerial: data.nvr,
          orgNo: data.buro,
          index: this.checkedBox,
          channel: data.channel,
          name: item.orgName + '/' + data.name,
          type: data.type
        }
        this.videoList = [...this.videoList]
      }
    },
    // async getVideoUrl (orgNo, deviceSerial, channel) {
    //   const tokenList = await this.getVideoList(orgNo)
    //   const token = tokenList.find((item) => item.orgNo === orgNo)?.accessToken
    //   return await this.getUrl(token, deviceSerial, channel)
    // },

    async getCameraList() {
      const res = await getCameraListApi()
      this.list = res?.data.list
      console.log(this.list)
    },
    async huifang(accessToken, deviceSerial, name, type, channelNo) {
      if (type === 'YS') {
        this.iframeSrc = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${deviceSerial}/1.local.rec&accessToken=${accessToken}`
        this.dialogName = name
        this.dialogVisible = true
      } else if (type === 'HK') {
        // const res = await getHkUrlApi({
        //   accessToken: accessToken,
        //   deviceSerial: deviceSerial,
        //   channelNo: channelNo,
        //   protocol: '4',
        //   type: '2',
        //   startTime: '2024-11-15 00:00:00',
        //   stopTime: '2024-11-15 10:00:00'
        // })
        const res = await getNewAccessTokenApi(accessToken)
        this.iframeSrc = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${deviceSerial}/${channelNo}.hd.rec&accessToken=${res.data.entity.token}`
        this.dialogName = name
        this.dialogVisible = true
      }
    },
    quanping(qpvideo) {
      console.log(qpvideo)
      this.qpvideo = qpvideo
      this.qp = true
    },
    qxqp() {
      this.qp = false
    },
    del(index) {
      this.videoList[index] = {}
      this.videoList = [...this.videoList]
    },
    // 获取监控地址
    // async getUrl (token, nvr, channelNo) {
    //   const res = await getUrlApi({
    //     accessToken: token,
    //     deviceSerial: nvr,
    //     channelNo: channelNo,
    //     protocol: '4'
    //   })
    //   return res.data.data.url
    // },
    // 查询token信息
    async getVideoList(buro) {
      const res = await getVideoListApi({
        orgNo: buro || '',
        pageNo: 0,
        pageSize: 10
      })
      return res.data.list
    }
    // 回放关闭
  }
}
</script>

<style lang="scss" scoped>
.bgc {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #f1f1f1;
  .main {
    display: flex;
    width: 100%;
    height: 100%;
    color: #333;
    background-color: #fff !important;
    .tree-tab {
      position: relative;
      width: 200px;
      height: 100%;
      text-align: center;
      .tree-list {
        .tree-list-arr {
          text-align: left;
          .tree-arr {
            height: 40px;
            padding-left: 10px;
            line-height: 40px;
          }
          .tree-list-parent {
            cursor: pointer;
            overflow: hidden;
            font-size: 14px;
            text-overflow: ellipsis;
          }
          .tree-list-children {
            cursor: move;
            font-size: 14px;
            background: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .tree-down {
        position: absolute;
        display: flex;
        height: 50px;
        width: 100%;
        bottom: 0;
        left: 0;
        justify-content: space-around;
        align-items: center;
        .box-img {
          cursor: pointer;
          width: 30px;
          height: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .contain {
      position: relative;
      overflow: hidden;
      width: 100%;
      .fullscreen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .wrap1 {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 100%;
        grid-template-rows: 100%;
        .view {
          border: 1px solid #8a8a8a;
        }
      }
      .wrap4 {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
        .view {
          border: 1px solid #8a8a8a;
        }
      }
      .wrap6 {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 33.3333% 33.3333% 33.3333%;
        grid-template-rows: 50% 50% 50%;
        .view {
          border: 1px solid #8a8a8a;
        }
      }
      .wrap9 {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 33.3333% 33.3333% 33.3333%;
        grid-template-rows: 33.3333% 33.3333% 33.3333%;
        .view {
          border: 1px solid #8a8a8a;
        }
      }
    }
  }
}
.heighlight {
  background-color: #fff;
}
.view {
  position: relative;
  /* 设置任意宽高任意一项即可 然后使用aspect-ratio元素 动态设置比例 */
  // height: 300px
  width: 100%;
  height: 100%;
  &:hover {
    .box-top {
      display: flex;
    }
  }
  .box-top {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 50px;
    background-color: black;
    opacity: 0.3;
    color: #282b2b;
    name {
      color: #2f64a1;
    }
    .box-top-icon {
      text-align: center;
      cursor: pointer;
      width: 24px;
      height: 24px;
      line-height: 24px;
      background-color: #fff;
      border-radius: 6px;
      margin-right: 20px;
    }
    .box-top-ic {
      width: 24px;
      height: 24px;
      margin-right: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// .rec-frame{
//   width: 100%;
//   height: 100%;
// }
::v-deep .el-dialog {
  width: 640px;
  overflow: hidden;
  .el-dialog__body {
    padding: 0;
    //   width: 645px;
    height: 480px;
  }
}
.pointer-cursor {
  cursor: pointer;
}
</style>
